<template>
    <div class="page-wrap">
        <div class="page-title">cdsBandWidthSlider 步长变动滚动条</div>
        <p class="page-description">由于网络的带宽，随后端传输的规则不同，带宽的步长也不同。该组件适用此情况</p>
        <div class="page-sub-title">基本用法</div>
        <codeShow :code="code1">
            <CdsBandWidthSlider v-model="num" :min="10" :max="1000" :step_rule="step" :spec="spec" @change="changeQos">
            </CdsBandWidthSlider><br/>
        </codeShow>
        <div class="page-sub-title">CdsBandWidthSlider API</div>
        <el-table :data="cdsBandWidthSliderTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
            <el-table-column label="类型" align="left" width="150" prop="type"></el-table-column>
            <el-table-column label="默认值" align="left" width="150" prop="default"></el-table-column>
        </el-table>

        <div class="page-sub-title">CdsBandWidthSlider 方法</div>
        <el-table :data="cdsBandWidthSliderFunTable" style="margin-top:20px;margin-bottom: 48px;">
            <el-table-column label="属性名" align="left" width="150" prop="attr"></el-table-column>
            <el-table-column label="说明" align="left" prop="illustrate"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
    import {CdsBandWidthSlider} from 'cds-ui-business-components'
    import codeShow from '../../components/code.vue'
    import { ref } from 'vue'
    const num = ref(0)
    const spec = ref([22, 214])
    const code1 = `
    <CdsBandWidthSlider v-model="num" :min="10" :max="1000" :step_rule="step" :spec="spec" @change="changeQos"></CdsBandWidthSlider>
    // 规则例子
    const step = ref([
        {
            "start":0,
            "end": 100,
            "step": 20,
        },
        {
            "start":100,
            "end": 200,
            "step": 50,
        },
        {
            "start":200,
            "end": 'MAX', // 若end为'MAX'，最大值为组件中的max值。'MAX'为无限的意思
            "step": 100,
        },
    ])
    // 特殊值的设置，数组中的数值将不受步长规则限制
    const spec = ref([22, 214])


`;
    const cdsBandWidthSliderTable = [
        {'attr': 'v-model', 'illustrate': '当前值', 'type': 'Number', 'default': '0'},
        {'attr': 'min', 'illustrate': '最小值', 'type': 'Number', 'default': '0'},
        {'attr': 'max', 'illustrate': '最大值', 'type': 'Number', 'default': '0'},
        {'attr': 'spec', 'illustrate': '特殊值，不受步长规则限制', 'type': 'Array', 'default': '[]'},
        {'attr': 'step_rule', 'illustrate': '步长规则', 'type': 'Array', 'default': '[]'},
        {'attr': 'disabled', 'illustrate': '是否禁用', 'type': 'Boolean', 'default': 'false'},
    ]
    const cdsBandWidthSliderFunTable = [
        {'attr': 'change', 'illustrate': '修改触发方法'},
    ]
    const step = ref([
        {
            "start":0,
            "end": 100,
            "step": 20,
        },
        {
            "start":100,
            "end": 200,
            "step": 50,
        },
        {
            "start":200,
            "end": 'MAX',
            "step": 100,
        },
    ])

</script>

<style scoped>

</style>